<div class="flex flex-col">
  <%= render Avo::PanelComponent.new do |c| %>
    <% c.with_body do %>
      <% if form.present? %>
        <%= field_container do %>
          <%= avo_edit_field(:name, as: :text, form: form, help: "The name of your city", required: true, component_options: {stacked: true}) %>
          <%= avo_edit_field(:number, :population, form: form, help: "The population of the city.") %>
          <%= avo_edit_field(:is_capital, as: :boolean, form: form) %>
          <%= avo_edit_field(:features, as: :key_value, form: form) %>
          <%= avo_show_field(:image_url, as: :external_image, form: form) do |model|
            'https://images.unsplash.com/photo-1660061993776-098c0ee403ac?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDMxMzc4NA&ixlib=rb-1.2.1&q=80&w=1080'
          end %>
          <%= avo_edit_field(:image_url, as: :external_image, form: form) %>
          <% if params[:show_native_fields].present? %>
            <%= avo_edit_field(:description, as: :trix, form: form, component_options: {resource_name: 'cities', resource_id: @resource.record&.id}) %>
          <% end %>
          <%= avo_edit_field(:tiny_description, as: :easy_mde, form: form) %>
          <%= avo_edit_field(:status, as: :select, enum: ::City.statuses, form: form) %>
          <%= avo_show_field(:status, as: :badge, enum: ::City.statuses, form: form) %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>
